<template>
  <div class="big">
    <div class="top">
      <div class="inner">
          <div class="next">
        <div class="last">
          <img src="../../assets/a2.png">
        </div>
        <div class="p">
          <p>10.9万次更新</p>
          <p>迟早更新</p>
        </div>
        <div class="lastright">
          <span>
            <i class="iconfont icon-toggle"></i>收藏
          </span>
        </div>
      </div>
      <div class="next">
        <div class="last">
          <img src="../../assets/a2.png">
        </div>
        <div class="p">
          <p>10.9万次更新</p>
          <p>迟早更新</p>
        </div>
        <div class="lastright">
          <span>
            <i class="iconfont icon-toggle"></i>收藏
          </span>
        </div>
      </div>
      <div class="next">
        <div class="last">
          <img src="../../assets/a2.png">
        </div>
        <div class="p">
          <p>10.9万次更新</p>
          <p>迟早更新</p>
        </div>
        <div class="lastright">
          <span>
            <i class="iconfont icon-toggle"></i>收藏
          </span>
        </div>
      </div>
      <div class="next">
        <div class="last">
          <img src="../../assets/a2.png">
        </div>
        <div class="p">
          <p>10.9万次更新</p>
          <p>迟早更新</p>
        </div>
        <div class="lastright">
          <span>
            <i class="iconfont icon-toggle"></i>收藏
          </span>
        </div>
      </div>
      <div class="next">
        <div class="last">
          <img src="../../assets/a2.png">
        </div>
        <div class="p">
          <p>10.9万次更新</p>
          <p>迟早更新</p>
        </div>
        <div class="lastright">
          <span>
            <i class="iconfont icon-toggle"></i>收藏
          </span>
        </div>
      </div>
      <div class="next">
        <div class="last">
          <img src="../../assets/a2.png">
        </div>
        <div class="p">
          <p>10.9万次更新</p>
          <p>迟早更新</p>
        </div>
        <div class="lastright">
          <span>
            <i class="iconfont icon-toggle"></i>收藏
          </span>
        </div>
      </div>
      <div class="next">
        <div class="last">
          <img src="../../assets/a2.png">
        </div>
        <div class="p">
          <p>10.9万次更新</p>
          <p>迟早更新</p>
        </div>
        <div class="lastright">
          <span>
            <i class="iconfont icon-toggle"></i>收藏
          </span>
        </div>
      </div>
      </div>
    </div>

    <div id="listaaa">
      <!-- <span>真实故事</span>
      <span>音乐推荐</span>
      <span>搞笑段子</span>
      <span>历史解密</span>
      <span>相声小品</span>
      <span>最燃电音</span>
      <span>专注时间</span>
      <span>热门翻唱</span>
      <span>英语美文</span>
      <span>新闻资讯</span>
      <span>悬疑罪案</span>
      <span>涨知识</span>
      <span>恋爱物语</span>
      <span>影视解读</span>
      <span>每日比听</span>-->
      <p>真实故事</p>
      <p>真实故事</p>
      <p>真实故事</p>
      <p>真实故事</p>
      <p>真实故事</p>
      <p>真实故事</p>
      <p>真实故事</p>
      <p>真实故事</p>

      <p>真实故事</p>
      <p>真实故事</p>
      <p>真实故事</p>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.big {
  /* width: 100%; */
  height: 4.1rem;
  background-color: gainsboro;
  padding-top: 0.7rem;
  border-radius: 0.15rem;

  /* overflow: hidden; */
}
.top{
  overflow-x: scroll;
}
.inner {
  margin-left: 0.2rem;
  margin-right: 0.2rem;
  display: flex;
  flex-wrap: nowrap;
}
.next {
  width: 5.72rem;
  height: 2rem;
  background-color: ghostwhite;
  margin: auto;
  display: flex;
  justify-content: space-between;
  padding-left: 0.3rem;
  padding-right: 0.3rem;
  box-sizing: border-box;
  margin: auto;
  border-radius: 0.15rem;
  flex-shrink: 0;
  margin-right: 0.2rem;
}
img {
  width: 1.29rem;
  height: 1.26rem;
  margin: auto;
  border-radius: 0.1rem;
}
.lastright span {
  display: block;
}
.lastright {
  border: 1px solid gainsboro;
  border-radius: 15%;
  color: grey;
  height: 0.48rem;
  margin: auto;
  border-radius: 0.1rem;
}
p {
  line-height: 0.4rem;
}
.p {
  color: grey;
  margin: auto;
  margin-left: -0.1rem;
}
.last {
  margin: auto;
}
#listaaa p {
  width: 3rem;
  height: 0.27rem;
  flex-shrink: 0;
  /* font-size: 0.28rem; */
  /* height: 0.34rem; */
}
#listaaa {
  height: 0.88rem;
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  /* overflow: hidden; */
  overflow-x: scroll;
  margin-top: 0.4rem;
  font-size: 0.3rem;
}
::-webkit-scrollbar{
    display:none;
}
</style>
